<template>
  <div class="content">
    <div class="content_header">
      <div class="searchbox">
        <input type="text" v-model="valueSearch">
        <button @click="searchHandle">搜索</button>
      </div>
      <!--      <div class="keybox"></div>-->
    </div>
    <div class="content_body">
      <div class="body_left">
        <ul>
          <li class="checked_title" @mouseover="openMenu(0)" >标签目录</li>
          <li v-for="(item,index) in menuList" :key="index" @mouseover="openMenu(item.nodeCode)">
            <Icon :type="menuIcons[index]"/>
            {{item.nodeName}}
          </li>
        </ul>
      </div>
      <div class="body_right">
        <div v-if="!showMenuInfo" class="card_box">
          <!-- 123! -->
          <div class="card" v-for="(item,index) in pageTagList" :key="index"
               :class="[item.isChecked?'card_checked':'card_unchecked']" @click="cardChange(item)">
            <div class="card_header">
              <img src="../../../../../src/assets/img/tagimg/tagIcon.png" alt="">
              <div class="title">{{item.propName}}</div>
              <template v-for="ob of objectOption">
                <div class="tag_title" v-if="ob.value===item.anaObjId">{{ob.label}}</div>
              </template>
              <template v-for="time of timeOption">
                <div class="tag_title" v-if="time.value===item.dateType">{{time.label}}</div>
              </template>
              <div class="order_style order_checked" v-if="item.isChecked">
                <Icon type="md-checkmark"/>
                已选择
              </div>
            </div>
            <div class="card_body">
              <div class="column">
                <div class="title">资产类型:</div>
                <div class="content">{{item.busiProcess}}</div>
              </div>
              <div class="column">
                <div class="title">支持路径:</div>
                <div class="content">{{item.techProcess}}</div>
              </div>
              <div class="column">
                <div class="title">业务口径:</div>
                <div class="content">{{item.propPath}}</div>
              </div>
              <div class="column">
                <div class="title">技术口径:</div>
                <div class="content"></div>
              </div>
            </div>
            <div class="card_footer">更新时间：{{item.updateDate}}</div>
          </div>
          <!-- 分页开始 -->
          <div class="page">
            <Page
              :total="total"
              size="small"
              :current="currentPage"
              :page-size-opts="pageSizeOptions"
              :page-size="pageSize"
              placement="top"
              show-elevator
              show-sizer
              show-total
              @on-change="getChangeCurrentPage"
              @on-page-size-change="getPageSize"
              />
          </div>
          <!-- 分页结束 -->
        </div>
        <div v-if="showMenuInfo" class="menu_info_box" @mouseleave="closeMenu">
          <div class="single_tree" v-for="(item,index) in menuInfo" :key="index">
            <div class="menu_title">{{item.nodeName}}</div>
            <div style="display: flex;flex-direction: column">
              <treeTemplate @getChildrenData='getChildrenData' value="这是值" :tree-data="item.children" :is-leaf="item.children[0].nodeLeaf"/>
            </div>
          </div>

          <!-- 00  测试 -->
          <!--    卡片显示   ====   同一个盒子  
                       ！卡片样式复制   数据绑定修改  卡片所在位置  勾选情况   数据添加显示 可搜索  
          -->
          <div  class="card_box_second">
             <div class="card" v-for="(item,index) in personInfoList" :key="index"
               :class="[item.isChecked?'card_checked':'card_unchecked']" @click="cardChange(item,'personInfoList')">
            <div class="card_header">
              <img src="../../../../../src/assets/img/tagimg/tagIcon.png" alt="">
              <div class="title">{{item.propName}}</div>
              <template v-for="ob of objectOption">
                <div class="tag_title" v-if="ob.value===item.anaObjId">{{ob.label}}</div>
              </template>
              <template v-for="time of timeOption">
                <div class="tag_title" v-if="time.value===item.dateType">{{time.label}}</div>
              </template>
              <div class="order_style order_checked" v-if="item.isChecked">
                <Icon type="md-checkmark"/>
                已选择
              </div>
            </div>
            <div class="card_body">
              <div class="column">
                <div class="title">资产类型:</div>
                 <div class="content">{{item.busiProcess}}</div>
              </div>
              <div class="column">
                <div class="title">支持路径:</div>
                <div class="content">{{item.techProcess}}</div>
              </div>
              <div class="column">
                <div class="title">业务口径:</div>
                <div class="content">{{item.propPath}}</div>
              </div>
              <div class="column">
                <div class="title">技术口径:</div>
                <div class="content"></div>
              </div>
            </div>
            <div class="card_footer">更新时间：{{item.updateDate}}</div>
        </div>
          </div>
          <!-- 00  测试-->
        </div>
      </div>
    </div>
    <div class="content_footer"></div>
  </div>
</template>

<script>

  import {tagMenuList, menuInfo} from "../../../../utils/dataInfo/tagMenu";
  import {tagInfo, timeOption, objectOption} from "../../../../utils/dataInfo/tagInfo";
  import treeTemplate from "./treeTemplate";

  export default {
    name: "tag_info",
    components: {treeTemplate},
    props:{
      tagInfoData:{
        type: Array,
        default: ()=>{
          return []
        }
      }
    },
    data() {
      return {
        valueSearch:'',//搜索框输入的value
        //是否显示菜单详情
        showMenuInfo: false,
        //左边菜单图标
        menuIcons: ['md-contact', 'md-home', 'md-contacts'],
        //左边菜单目录数据
        menuList: tagMenuList,
        //目录详情
        menuInfo: menuInfo,
        //当前标签列表
        tagList: tagInfo,
        //人员类型标签判断
        objectOption: objectOption,
        //时间标签判断
        timeOption: timeOption,
        //当前选中的菜单目录
        menuFlag: 0,
        //当前页面所有选中的卡片数据
        checkedCard: [],
        
        // 当前页 默认为第一页
        currentPage: 1,
        // 总页数
        total: 0,
        // 每页条数 默认条数
        pageSize: 10,
        pageSizeOptions: [2, 4, 6, 8, 10],
        pageTagList: [],
        personInfoList: [],
        clonePageTagList:[],
        

      }
    },
    watch:{
      tagInfoData(data){
        console.log(data,'123123123');
      }
    },
    created() {
      this.checkedCard = JSON.parse(JSON.stringify(this.tagList));
      this.tagList = this.modifyCard(this.checkedCard, this.tagList, 'propCode');
      this.total = tagInfo.length;
      this.paramLntPerlogs()
    },
    methods: {
      searchHandle(){
      if(!this.clonePageTagList.length){
        this.clonePageTagList = JSON.parse(JSON.stringify(this.pageTagList))
      }
        console.log(this.pageTagList,this.valueSearch)
        let arr =   this.clonePageTagList.filter(item=>{
          return item.propName.includes(this.valueSearch)
        })
        this.pageTagList = arr
      },
      // 删除数据
      delete(index){//有接口后，这里调接口发请求删除数据
        console.log(index)
        this.tagList.splice(index, 1);
        console.log(this.tagList);            
      },
      // 改变页码触发函数
      // currentPage: 当前页码
      async getChangeCurrentPage(currentPage) {
        // 如果有加载效果，在这里开启loading

        // 获取当前页码
        this.currentPage = currentPage

        // 进行请求
        this.paramLntPerlogs()
      },
      // 获取页面条数切换
      getPageSize (pageSize) {
        this.pageSize = pageSize;
        this.paramLntPerlogs()
      },
      // pageSize 每页条数
      // currentPage 当前页
      paramLntPerlogs() {
        // 每次调用清空数据
        this.pageTagList = []
        // 获取数据
        let pageSize = this.pageSize
        let currentPage = this.currentPage
        // 进行筛选
        for (let index = 0; index < this.tagList.length; index++) {
          if (((currentPage - 1) * pageSize <= index) && ((currentPage - 1) * pageSize + pageSize) > index) {
            this.pageTagList.push(this.tagList[index])
          }          
        }

        console.log(this.pageTagList);
      },
      // 保存分页数据

      //当前卡片列表中是否存在可以回填的数据
      //allChecked：所有选中卡片数据（待回填数据）
      //nowChecked：当前卡片列表
      //key:唯一值字段名
      modifyCard(allChecked, nowChecked, key) {
        console.log(nowChecked);
        nowChecked.forEach(val => {
          if (this.findByCode(val[key], key, allChecked) == -1) {
            val.isChecked = true
          } else {
            val.isChecked = false
          }
        })
        return nowChecked;

      },
      // 点击box
      cardChange(item,name) {
        // let index = this.findByCode(item.propCode, 'propCode', this.checkedCard);
        // console.log(index);
        //  this.checkedCard.push(index)
        // console.log(this.checkedCard);
      
        // if (index !== -1) {
        //   this.checkedCard.splice(index, 1);
        //   item.isChecked = false;
        // } else {
        //   console.log('选中；=========');
        //   this.checkedCard.push(item);
        //   item.isChecked = true;
        // }
        // this.checkedCard.push(item)
        let isHas = null;
        this.checkedCard.map((currentValue)=>{
          if(currentValue.id === item.id){
            currentValue.isChecked = !currentValue.isChecked;
            isHas = true;
          } else if(!isHas){
            isHas = false;
          }
        })

        !isHas && (this.checkedCard.push(item),item.isChecked = true);

        // item
        // if(this.personInfoList.length > 0 && name === 'personInfoList') {
        //   this.personInfoList.find(v=> v.id == item.id).isChecked = !this.personInfoList.find(v=> v.id == item.id).isChecked;
        // }
        if(this.pageTagList.length > 0 && !name) {
          this.pageTagList.find(v=> v.id == item.id).isChecked = !this.pageTagList.find(v=> v.id == item.id).isChecked
        }
        console.log('选中总列表；=========');
        console.log(this.checkedCard);
      },

      //查询卡片列表中是否有该卡片
      findByCode(keyValue, key, list) {
        let result = -1;
        for (let i = 0; i < list.length; i++) {
          if (list[i][key] === keyValue) {
            result = i;
            break;
          }
        }
        return result;
      },
      openMenu(val) {
        console.log("l")
        this.menuFlag = val;
        this.getTagList(this.menuFlag);
        this.showMenuInfo = true;
        console.log(this.getTagList(this.menuFlag))
        console.log(this.showMenuInfo)
      },
      //模拟获取卡片展示列表数据
      getTagList(val) {
        this.tagList = [];
        this.tagList = tagInfo;
        console.log(val)
        switch (val) {
          case 2:
            this.menuInfo = menuInfo;
            break;
          default:
            this.showMenuInfo = false;
            // this.menuInfo = [];

        }

      },
      //关闭菜单
      closeMenu() {
        this.showMenuInfo = true
      },
      returnValue() {
        // return this.checkedCard;
        console.log("结果是",this.checkedCard.filter(v=>v.isChecked == true));
        return this.checkedCard.filter(v=>v.isChecked == true);
      },
      getChildrenData(val) {
        console.log("接受到数组",val)
        this.personInfoList = val;
      }


    }
  }
</script>

<style lang="less">
  @searchHeight: 3rem;
  /*蓝色背景*/
  @bgColor: #3f77f5;
  /*灰色背景*/
  @bgColor2: #f5f6f9;

  :root {
    font-size: 10px;
  }

  .content {
    /*顶部搜索框*/

    .content_header {
      padding-top: 1rem;
      height: 10vh;
      width: 100%;


      .searchbox {
        width: 60%;
        height: 3rem;
        margin: 0 auto;
        position: relative;

        input {
          height: 100%;
          width: calc(100% - 10rem);
          padding: 1rem;
          outline: none;
          background-color: @bgColor2;
          border: none;
          color: #515a6e;

          &:focus {
            border: 1px solid @bgColor;
          }
        }

        button {
          position: absolute;
          right: 0px;
          height: 100%;
          width: 10rem;
          background-color: @bgColor;
          color: white;
          border: none;
        }
      }

      /*关键词区域*/

      .keybox {
        width: 50%;
        height: 4vh;
        margin: 0 auto;
      }

    }

    /*中间内容区域*/

    .content_body {
      background-color: @bgColor2;
      height: 50vh;
      padding: 1rem;
      display: flex;
      /*左边菜单目录区域*/

      .body_left {
        height: 100%;
        width: 18rem;
        background-color: #ffffff;

        ul {
          li {
            width: 18rem;
            list-style: none;
            line-height: 3rem;
            font-size: 1.3rem;
            text-align: center;

            & + i {
              margin-right: 1rem;
            }


            &:nth-child(n+2):hover {
              background-color: @bgColor2;
              cursor: pointer;
            }
          }

          .checked_title {
            background-color: @bgColor;
            color: #fff;
          }

          .checked {
            background-color: @bgColor2;
          }
        }

      }

      /*卡片列表展示区 | 菜单详情（子菜单树结构展示区）*/

      .body_right {
        flex: 1;

        .card_box {
          display: flex;
          padding: 1rem;
          height: 100%;
          overflow: auto;
          flex-wrap: wrap;

          .page {
            width: 100%;
            display: flex;
            justify-content: flex-end;
          }

          .card {
            position: relative;
            margin: .8rem;
            padding: .8rem;
            height: 16rem;
            width: 30rem;
            border-radius: 1rem;
            background-color: #fff;

            &:hover {
              border: 1px solid @bgColor;
            }

            .card_header {
              display: flex;
              font-size: 1rem;

              img {
                height: 2rem;
                width: 2rem;
              }

              .title {
                padding-left: .5rem;
                line-height: 2rem;
                font-size: 1.2rem;
                font-weight: 700;
                margin-right: .5rem;
              }

              .tag_title {
                border: solid @bgColor 1px;
                color: @bgColor;
                line-height: 1.8rem;
                border-radius: .2rem;
                margin: .1rem .3rem;
                padding: 0 .5rem;
              }

              .order_style {
                line-height: 2rem;
                padding: .2rem .5rem;
                border-radius: .2rem;
                position: absolute;
                right: 1rem;
              }

              .order_checked {
                background-color: @bgColor;
                color: #fff;
              }

              .order_unchecked {
                background-color: @bgColor2;
                color: #515a6e;
              }


            }

            .card_body {
              padding: 1rem;

              .column {
                display: flex;
                line-height: 2rem;
               /*background-color: pink;*/


                .title {
                  text-align: right;
                  width: 30%;
                  font-weight: 500;
                  font-size: 1rem;
                }

                .content {
                  padding-left: 1rem;
                  font-size: 1rem;
                  color: #bcbcbc;
                  text-align: left;
                }
              }

            }

            .card_footer {
              position: absolute;
              font-size: 1rem;
              bottom: .8rem;
              right: .8rem;
              color: #cdcdcd;

            }

          }

          .card_checked {
            border: 1px solid @bgColor;
          }

          .card_unchecked {
            border: none;
          }
        }

        .card_box_second {
          display: flex;
          padding: 1rem;
          height: 100%;
          flex-wrap: wrap;

          .page {
            width: 100%;
            display: flex;
            justify-content: flex-end;
          }

          .card {
            position: relative;
            margin: .8rem;
            padding: .8rem;
            height: 16rem;
            width: 30rem;
            border-radius: 1rem;
            background-color: #fff;

            &:hover {
              border: 1px solid @bgColor;
            }

            .card_header {
              display: flex;
              font-size: 1rem;

              img {
                height: 2rem;
                width: 2rem;
              }

              .title {
                padding-left: .5rem;
                line-height: 2rem;
                font-size: 1.2rem;
                font-weight: 700;
                margin-right: .5rem;
              }

              .tag_title {
                border: solid @bgColor 1px;
                color: @bgColor;
                line-height: 1.8rem;
                border-radius: .2rem;
                margin: .1rem .3rem;
                padding: 0 .5rem;
              }

              .order_style {
                line-height: 2rem;
                padding: .2rem .5rem;
                border-radius: .2rem;
                position: absolute;
                right: 1rem;
              }

              .order_checked {
                background-color: @bgColor;
                color: #fff;
              }

              .order_unchecked {
                background-color: @bgColor2;
                color: #515a6e;
              }


            }

            .card_body {
              padding: 1rem;

              .column {
                display: flex;
                line-height: 2rem;
               /*background-color: pink;*/


                .title {
                  text-align: right;
                  width: 30%;
                  font-weight: 500;
                  font-size: 1rem;
                }

                .content {
                  padding-left: 1rem;
                  font-size: 1rem;
                  color: #bcbcbc;
                  text-align: left;
                }
              }

            }

            .card_footer {
              position: absolute;
              font-size: 1rem;
              bottom: .8rem;
              right: .8rem;
              color: #cdcdcd;

            }

          }

          .card_checked {
            border: 1px solid @bgColor;
          }

          .card_unchecked {
            border: 1px solid red;
          }
        }

        .menu_info_box {
          height: 100%;
          width: 70%;
          background-color: #fff;
          border-left: solid #cdcdcd 1px;
          padding: 2rem;
          overflow: auto;

          .single_tree {
            display: flex;


            .menu_title {
              background-color: @bgColor;
              padding: 0 .8rem;
              line-height: 3rem;
              height: 3rem;
              font-size: 1.2rem;
              color: #ffffff;
              font-weight: 700;
            }

            .menu_tree_body {
              .menu_tree_other {
                /*background-color: pink;*/
                line-height: 1.5rem;
                width: 8rem;
                font-size: 1rem;
                float: left;
                border-right: .15rem solid #a3bcdf;
                margin: 1rem;
                font-weight: 700;
              }

              .menu_leaf {
                display: inline-block;
                height: 3rem;
                font-size: 1rem;
                line-height: 3rem;
                padding: 0 .8rem;
                float: left;
                cursor: pointer;
              }
            }


          }


        }

      }
    }

    /*底部*/
    .content_footer {

    }
  }


</style>
